<template>
  <div class="HLProductINfo">
    <div class="router-box" style=" margin-bottom: 20px;">
      <el-row :gutter="20">
        <el-col :span="12">
          <router-link :to="{name:'HLProductINfo'}">产品信息</router-link>
        </el-col>
        <el-col :span="12">
          <router-link :to="{name:'HLQualityTesting'}">质检</router-link>
        </el-col>
      </el-row>
    </div>
    <div class="search-box">
      <el-input placeholder="请输入内容" class="input-with-select">
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>

    </div>

    <!-- 表格 -->
    <div class="absolute-box" style='flex:1' v-if='productList.length>0'>
      <el-table @row-click="openDialog"
        :data="productList"
        height="100%"
        border
        style="width: 100%;">
      <el-table-column
          prop="productName_N"
          label="产品名称">
      </el-table-column>
      <el-table-column
          prop="productVersion_N"
          label="产品型号">
      </el-table-column>
      <el-table-column
          prop="productModelName"
          label="版本名称">
      </el-table-column>
      <el-table-column
          prop="type"
          label="产品类型">
      </el-table-column>
      <el-table-column
          prop="productModelVersion"
          label="版本号">
      </el-table-column>
    </el-table>
    </div>

    <!-- 弹出form -->
    <el-dialog :title="model.productName_N" :visible.sync="dialogFormVisible">
      <el-form :model="model">
        <el-form-item label="产品系列">
          <el-input v-model="model.productGroup" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="产品型号">
          <el-input v-model="model.productModel" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="产品名称">
          <el-input v-model="model.productName_N" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="版本名称">
          <el-input v-model="model.productModelName" readonly="readonly" type="textarea "></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogFormVisible = false">关闭</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    data() {
      return{
        productList: {},
        dialogFormVisible:false,
        model: {}
      }
    },
    created() {
      // 在模板渲染成html前调用,即通常初始化某些属性值

      this.$http.get('/mock/HLProduct/GetProductListByCondition.json').then((response) => {
        response = response.body;
        this.productList = response.rows;
      });
    },
    methods: {
      openDialog:function(row, event, column) {
        this.dialogFormVisible=true;
        this.model = row;
      }
    }
  }
</script>

<style>

</style>